<template>
  <div
    style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background-color: #0C0C18">
    <div
      :style="{ width: (159 / 96) + 'rem', height: (71 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: (27 / 96) + 'rem', marginBottom: (23 / 96) + 'rem', marginLeft: (51 / 96) + 'rem' }">
      <img style="width: 100%; height: 100%;" :src="logos" />
    </div>
    <div class="father"
      :style="{ height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'relative', cursor: 'pointer', marginRight: (60 / 96) + 'rem' }">
      <div
        :style="{ width: (174 / 96) + 'rem', height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
        <div
          :style="{ width: (85 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', zIndex: 101 }">
          <span
            :style="{ fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#B47702', lineHeight: (30 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }">{{
            userName }}</span>
        </div>
        <div
          :style="{ width: (59 / 96) + 'rem', height: (59 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', zIndex: 101 }">
          <img :style="{ width: '100%', height: '100%', borderRadius: '100%' }" :src="userImages" />
        </div>
      </div>
      <div class="child"
        :style="{ width: (174 / 96) + 'rem', height: (216 / 96) + 'rem', position: 'absolute', top: 0, right: (0 / 96) + 'rem' }">
        <div
          :style="{ width: '100%', height: (121 / 96) + 'rem', background: '#000000', borderRadius: (6 / 96) + 'rem' }">
        </div>
        <div
          :style="{width: '100%', height: (95 / 96) + 'rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: 'rgba(0, 0, 0, 0.7)', borderRadius: (6 / 96) + 'rem' }">
          <div @click="accountSecurityClick"
            :style="{ width: (174 / 96) + 'rem', height: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
            <span
              :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (30 / 96) + 'rem' }">账号与资料</span>
          </div>
          <div :style="{ width: (161 / 96) + 'rem', height: (1 / 96) + 'rem', background: '#CCCCCC' }"></div>
          <div @click="loginOutClick"
            :style="{ width: (174 / 96) + 'rem', height: (47 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
            <span
              :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#FFFFFF', lineHeight: (30 / 96) + 'rem' }">退出登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    props: {
      logos: {
        type: String,
        default () {
          return "../../../static/logos.png"
        }
      },
      userName: {
        type: String,
        default () {
          return ""
        }
      },
      userImages: {
        type: String,
        default () {
          return "../../../static/Logo_image.png"
        }
      }
    },
    data () {
      return {

      }
    },
    methods: {
      accountSecurityClick () {
        // this.$emit("accountSecurityClick");
      },
      loginOutClick () {
        // this.$emit("loginOutClick");
      },
    }
  }
</script>

<style scoped>
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .father .child {
    display: none;
  }

  .father:hover .child {
    display: block;
    z-index: 100;
  }
</style>